Basic Typography Concepts 字型基礎概念

Alphabet 字母表

字母表是一套簡單的符號系統,每個符號代表一個基本的語音。我們把這些符號叫做字母。字母表和其他寫字的方式不一樣,比如有的文字用符號表示音節,有的用符號表示詞的意思。現在的英語除了字母以外,還會用一些特殊符號,像數字(1、2、3)和符號(@、&)。

古英語和現代英語字母表示例。

Character 字元

字元就像是文字的積木,包括字母、標點符號等基本寫作符號。它和我們實際看到的字的樣子(字形)有關,但不完全一樣。

比如說,同一個字元"A",在不同的字型裡可以有不同的樣子。每個字型都會把字元對應到它自己獨特的顯示樣式。反過來說,有時候不同的字元也可能用同樣的樣子來顯示。你可以把字元理解為抽象的概念,而字形則是我們真正看到的具體樣子。

Letters 字母

字母就是用來表示發音的符號,是組成字母表的基本單位。

從語言學角度來說,字母是書寫系統最基本的組成部分,專業上叫做"字位"。在日常生活中,我們說的"字母"主要指英語中的A、B、C這樣的符號。不過要注意的是,像中文這樣用符號來表達意思的文字(比如"雨"、"月"、"人"),我們一般叫它們"字元"而不是"字母"。

Type 活字

活字就是把文字做成可以重複使用的印刷模具。以前人們只能手寫文字,但有了活字印刷技術後,就可以大量快速地印刷書籍了,這個發明對人類文明的發展有很大影響。

今天我們說的"活字"主要指的是字型的設計方式,包括字的外觀和讓人容易閱讀的設計。比如在Google Fonts裡,你能找到普通的文字字型、特殊裝飾用的字型,還有圖示和表情符號。

Typeface 字型設計

字型其實就是文字的外觀設計。你可以把字型想象成文字的"樣式"或"長相"。

簡單來說,當我們說"字型"時,指的是文字的整體設計風格(比如宋體、黑體),而"字型"則是這個設計的具體檔案形式。就像一首歌可以儲存成MP3檔案一樣,字型設計也需要儲存成字型檔案才能在電腦上使用。

Font 字型

字型(Font) vs 字型設計(Typeface)

字型設計就是文字的整體外觀和風格。比如說,你看到的字是圓潤的還是方正的,這就是字型設計的表現。而字型呢,就是讓你能在電腦上使用這種設計的具體檔案。

舉個簡單的例子:微軟雅黑是一個字型設計,而微軟雅黑的粗體版本就是一個具體的字型。

Glyph 字形

字形就是我們實際看到的文字樣子。每種字型都會把抽象的字元轉換成具體的字形顯示出來。每個字形都按照一定的規則(Unicode標準)儲存在字型檔案裡。

字形和字元是有區別的:一個字元可以有不同的顯示樣子(比如同一個"A"可以寫得漂亮一點或簡單一點),而一個字形有時也可以表示多個字元(比如把"fi"合在一起寫)。簡單說,字元是我們腦子裡的概念,而字形是我們眼睛真正看到的樣子。

Licensing 字型許可

字型許可就是一份規則說明,告訴你可以怎麼使用這個字型。不管你用的是免費還是付費的字型,都會有這樣的規則。用字型的時候,你需要遵守這些規則。

字型許可主要說明三件事:
• 你可以在多少臺電腦上安裝這個字型
• 你的網站可以讓多少人使用這個字型
• 你怎麼才能把字型放到app裡使用

雖然這些規則看起來可能有點複雜,但廠商一般都會提供簡單的問答來幫你理解。如果是開源字型(比如SIL開源字型),規則會更簡單明瞭。如果你對規則有不明白的地方,可以看看詳細說明或者問專業人士。

Script (writing system) 文字系統

文字系統就是一種寫字的方法,它告訴我們怎麼把語言寫下來。每種文字系統都有自己的規則,告訴我們該怎麼正確地寫字。

有趣的是,不同的語言有時會用同一種文字系統。就拿英語、法語、德語、挪威語和葡萄牙語來說,雖然它們說起來完全不一樣,但都用相同的拉丁字母來寫。只是每種語言會在字母上加一些小符號,讓它們能更好地表達自己的發音。

字型示例:EB Garamond,Roboto Slab,Comfortaa,Open Sans,Noto Serif, Noto Sans

其他文字系統包括:希臘文(拉丁文的基礎)、西里爾文(源自希臘大寫字母)、阿拉伯文、韓文、南亞和東南亞的印度文字、漢字,以及非洲的傳統文字。

Unicode 統一碼

Unicode 就像是給每個文字元號都安排了一個獨特的號碼。就算你用不同的語言寫同一個字母(比如"A"),它的號碼都是一樣的,這樣電腦就能準確識別它。

想象一下,就像每個人都有自己的身份證號碼一樣。同一個字母"A"可以寫得好看一點或者簡單一點,就像同一個人可以穿不同的衣服,但身份證號碼(Unicode編號)始終是一樣的。

雖然字型設計師可以隨意決定在字型裡放什麼字元(比如可以只做數字),但一般的字型都會包含我們常用的那些字元。

Readability 可讀性

1 可讀性就是看文字時覺得舒不舒服。這主要取決於三個方面:讀者自己的情況,比如視力好不好、文章寫得怎麼樣、文字排版的樣子,包括用什麼字型

2 為了讓文字更容易讀懂,我們要考慮:內容是不是有意思、寫得簡單還是複雜、用什麼樣的寫作方式、字型看起來舒不舒服

字型設計也很重要,比如字的粗細、字和字之間的距離、字的大小等,都會影響我們讀起來舒不舒服。

Legibility 可辨識度

可辨識度說的是文字看起來有多清楚。簡單地說,就是我們能不能一眼就認出每個字。這跟文字讀起來舒不舒服(可讀性)不太一樣,但會影響我們讀得舒不舒服。

有些字型設計得特別好認,比如它們會把容易混淆的字母和數字設計得不一樣。舉個例子:數字"1"、大寫的"I"和小寫的"l"(1Il),還有"0"、大寫的"O"和小寫的"o"(0Oo),在好的字型裡看起來都不一樣。字型大小、粗細、顏色,以及字和字之間的距離,都會影響我們認字的清楚程度。

要想文字容易讀,就得要容易認。文字太小容易看不清,但單純放大文字不一定能提高可讀性,就像合同裡的小字放大後也不一定容易讀懂。

字間距大小影響文字的辨識度。某些專用字型,如程式碼等寬字型和車牌字型,都經過特別設計以提高辨識度。

Uppercase & lowercase 大小寫字母

一般來說,文字分為大寫和小寫兩種。大寫字母我們主要用在:

其他時候,我們都用小寫字母。

有趣的是,最早的拉丁字母只有大寫。小寫字母是人們寫字時慢慢發展出來的。

如果要用大寫字母排版,尤其是字比較小的時候,建議把字母之間的距離放大一點,這樣更容易看清楚。

Small caps 小型大寫字母

小型大寫字母其實很簡單,就是把大寫字母做得小一點,讓它能和普通小寫字母很好地配合在一起。它比普通大寫字母看起來更舒服,也不會太顯眼。這種字母的高度一般比小寫字母"x"的高度稍微高一點。

什麼時候用小型大寫字母呢?主要是在寫三個或更多字母的大寫文字時。舉個例子:像"US"這麼短的縮寫用普通大寫字母就可以了,但如果是"UNESCO"這樣比較長的縮寫詞,用小型大寫字母會更好。記住,用大寫字母的時候,字母之間要留出適當的空間。

還有一個重要的提醒:不要直接把普通大寫字母縮小來代替小型大寫字母,因為這樣字會變得太細,看起來不好看。應該用專門設計好的小型大寫字母。

All-caps 全大寫字母

全大寫字母就是把所有字母都寫成大寫。不過要注意,大寫字母不太適合用來寫長段文字,因為這樣會讓人不容易看清楚。所以我們通常只在以下情況用全大寫:

當你用小號字型寫全大寫文字時,如果超過2-3個字母,最好在字母之間多留一些空間,這樣會更容易看清楚。

舉個簡單的例子:大號字型寫"QUIET"時,字母間距可以保持正常;但如果用小號字型寫"LOUD",就需要把字母之間的距離放大一點。如果你真的需要在正文裡用大寫字母,建議用小型大寫字母。因為這種字母看起來比較溫和,不會太突出,更容易和其他文字搭配。

Regularor upright常規字型(正體)

"Regular"(常規)很簡單,它有兩個基本含義:第一種是指字型的粗細程度(在CSS程式碼中用數字400表示),第二種是指字型的正常樣式(就是沒有傾斜的字型)。

為了避免混淆,我們最好具體說明是哪種含義,比如說"常規正體"或"常規斜體"。在網頁設計中(CSS),這種普通的字型樣式叫做"normal",程式碼寫法是font-style: normal;

"Regular"有時候還可以表示字型的寬度。當字型有窄的或寬的變化形式時,一般把普通寬度叫做"normal"(正常)。比如我們會說"常規正常正體"或"粗體窄斜體"。

Italic 斜體

斜體是一種傾斜的字型樣式,主要用來強調文字。它源自於手寫體,與正體形成鮮明對比。

與單純傾斜的字型不同,斜體在結構上更接近手寫體,有其獨特的風格。一些字型的斜體樣式與其正體差異很大,比如Bodoni Moda、IBM Plex Serif和Source Serif 4等字型。

如果字型沒有真正的斜體(或傾斜體),軟體可能會生成"偽斜體"。和偽粗體、偽小型大寫字母一樣,應該避免使用偽斜體。

Oblique 傾斜體

傾斜體就是把正常的字型往一邊傾斜了一下。這和斜體不一樣,因為斜體是根據手寫字的樣子專門設計的。當我們製作傾斜體時,設計師會細心調整每個字的形狀,確保字型看起來均勻好看,不會出現變形或者有的地方太粗有的地方太細的問題。

傾斜體不像斜體那麼常見,比如Josefin Sans.這樣的無襯線字型

Bold 粗體

粗體就是比普通字型更粗的字型樣式,我們經常用它來讓某些文字顯得更突出、更重要。

粗體到底有多粗?這要看字型設計師怎麼設計。一般來說,粗體的粗細在正常字型和超粗字型之間。現在有些新型字型還可以讓你自己調整字型的粗細。如果你做網頁設計,在CSS程式碼裡用700這個數字就能設定粗體。

Letterform 字形

字形就是每個字母的外觀樣子。同一種字型裡的所有字母都會有相似的設計特點,讓它們看起來是一家人。要了解一個字形,我們會看它的基本組成:比如字母有什麼弧度,是不是中空的,筆畫怎麼寫,以及整體的大小比例(包括小寫字母x的高度,大寫字母的高度,還有字母向上下延伸的部分)。

Terminal 筆畫末端

在字型設計中,筆畫末端就是字母或文字筆畫的結尾部分。簡單來說,就是每個筆畫寫完時的那個收筆地方。

筆畫末端可以有不同的樣子。比如說:大寫字母"E"的橫線兩端可以有裝飾(襯線)、小寫字母"a"的末端可以是圓圓的、有些末端可以比筆畫本身更寬。這些不同的末端設計會讓字型看起來有不同的風格,也會影響我們讀字的時候有多容易看清楚。

Text 正文與文案

正文指的是頁面上的主要文字內容,和標題、說明文字、引用等不一樣。"text"這個詞有時候也用來說明文字的大小,通常指比較小的字號,和"正文"是一個意思。

我們看到的所有文字都需要用字型來顯示,不管是在紙上還是在電腦螢幕上。這些需要排版的文字內容,專業人員通常叫它"文案"。

正文的字號一般會比較小,因為這是我們要長時間閱讀的主要內容。所以正文字型一定要容易看清楚,不能讓人眼睛累。

如果你做網頁設計,可以在:root裡先設定一個基本的文字大小,然後根據這個大小來調整其他部分(比如標題)的文字大小。

Stylistic sets 風格集

風格集就是字型裡的一套不同樣式的字母。透過OpenType功能,你可以在這些不同樣式之間切換。

比如說,一個字型可能會給"a"、"g"和"z"這些字母設計幾種不同的寫法,讓你選擇你喜歡的風格。有時候可能只改變一個字母的樣式。

為了方便使用者理解,設計師會給這些風格集起一些描述性的名字。舉個例子,Alegreya字型中有一個叫"箭頭、三角形和圓圈"的風格集,這比用"ss01"、"ss02"這樣的數字編號要更容易理解。

Swash glyph 裝飾變體字母

裝飾變體字母就是字母的一種特別好看的版本,你經常能在襯線字型和手寫字型裡看到。它們就是在普通字母上加了一些漂亮的裝飾線條。

使用這種裝飾字母要注意空間問題。它們最好用在單詞的開頭或結尾,因為裝飾線條需要額外空間。這也是為什麼裝飾大寫字母一般只出現在單詞開頭。

來看個例子:如果在單詞中間使用帶裝飾的字母,可能會和其他字母撞在一起,看起來很亂。但如果只在單詞開頭用裝飾字母,就會好看得多。

好的字型設計會自動避免這些字母之間的衝突問題。你可以在字型設定中開啟或關閉這個裝飾字母功能。

Dingbat 裝飾符號

裝飾符號就是一些特別的小圖案,和普通的字母數字不一樣。它們通常是一些簡單的圖形,比如小箭頭、星星或者其他圖案。

這些小圖案的設計和字型的其他部分是配套的,所以用起來看起來很搭配,不會顯得突兀。

Numerals 數字字元

字型裡的數字也有不同的樣式。就像字母一樣,數字可以按照不同的需求來顯示。

數字主要分成這幾種:有的跟大寫字母一樣高,有的跟小寫字母差不多高度;有的每個數字寬度不一樣,有的所有數字寬度都一樣。這樣我們就能在不同場合選擇最合適的數字樣式。

Homoglyph 相似字形

相似字形就是那些看起來一樣但其實是不同的字元。

舉個簡單的例子:在一些字型裡,大寫的"I"、小寫的"l"和數字"1"看起來差不多。這樣容易讓人看錯,也會讓電腦在搜尋或排序時出問題。

這種情況在不同語言之間也會發生。比如英文字母"H"和希臘文字母"H"看起來一模一樣,但它們是兩個不同的字元。雖然在紙上印刷時沒什麼問題,但在電腦上使用時(特別是複製貼上時)可能會造成混亂,尤其是對那些幫助視障人士閱讀的軟體來說。

Weight 字重

字重就是字型看起來有多粗或多細。最簡單的例子就是普通字型和粗體字,不過字型的粗細其實有很多種選擇。

從最細到最粗,字重大概分這幾種:

以前要用不同粗細的字,需要安裝不同的字型檔案。現在有了新技術叫"可變字型",只要一個字型檔案就能隨意調整字的粗細,特別方便。

Style 字型樣式

一個字型系列可以包含正體(Regular)、斜體(italic)、傾斜體(oblique)和小型大寫字母(small caps)等不同樣式。更多樣式請參考"樣式集(Stylistic sets)"。

在CSS中,用font-style屬性可以在正常(normal)和斜體(italic)或傾斜體之間切換。

Contrast 對比度

對比度說的是字型粗細的變化。想象一下,有些字型的每一筆都差不差不多粗細,這就是低對比度;而有些字型有明顯的粗細變化,這就是高對比度。

一個簡單的規律是:大號的標題字型通常會用高對比度,讓字看起來更有特點。另外,帶裝飾邊角的襯線字型,比起簡單的無襯線字型,一般對比度會更高。

現在的新型可變字型很靈活,透過調整粗的部分(XOPQ)和細的部分(YOPQ),我們可以很容易地改變字型的對比度。

Uppercase & lowercase 大小寫字母

一般來說,字母都有兩種寫法:大寫和小寫。大寫字母用在這些地方:句子的開頭、人名地名這樣的專有名詞,還有縮寫詞。大寫字母有時也用來做一些特別的設計。其他時候,我們都用小寫字母。

有趣的是,早期的拉丁字母只有大寫。小寫字母是人們後來寫字時慢慢發展出來的。

在做文字設計時,如果要用比較小的大寫字母,建議把字母之間的距離稍微放大一點,這樣更容易看清楚。現在的文字軟體都可以輕鬆地把字母在大小寫之間轉換,如果是用CSS寫網頁,就用text-transform這個功能。

Classification 字型分類

字型分類是把不同型別的字型按照風格或歷史時期來分類整理,讓我們更容易理解和查詢字型。

Designspace 設計空間

設計空間是一個幫助設計師調整可變字型樣子的工具。簡單來說,它就像一個控制面板,可以讓字型的外觀變化更加靈活。

在這個系統裡,每種變化方式(比如字型的粗細、寬度等)就像一個調節按鈕。當我們調整這些按鈕時,字型的樣子就會相應改變。舉個簡單的例子:如果一個字型有粗細和寬度兩個調節按鈕,我們就可以同時調整這兩個方面。有些複雜的字型甚至可以有十多個這樣的調節按鈕,讓字型變化更加豐富。

Family, type family, or font family 字型家族

字型家族是指同一種字型設計的不同版本的集合。就像一個家庭成員有相似的長相,字型家族裡的每個字型都有相同的基本設計風格,只是在粗細、傾斜度等方面有所不同。

舉個例子,一個基本的字型家族通常包括:

有些字型家族更豐富,會提供從非常細到非常粗的多種選擇。不過現在有了新技術叫"可變字型",只需要一個字型檔案就能隨意調整這些樣式,使用起來更方便了。

如果一個字型設計既有帶裝飾邊角的版本(襯線體),又有簡單的版本(無襯線體),我們就叫它"超級字型家族"。

Superfamily 超級字型家族

超級字型家族就是把一組相關但風格不同的字型放在一起。這些字型雖然外觀有所不同,但都遵循同樣的基本設計理念。

普通的字型家族一般只提供同一種字型的不同粗細版本。但超級字型家族更豐富,它包含了多種不同型別的字型,比如有裝飾邊角的襯線體和簡潔的無襯線體。現在有了新的可變字型技術,只需要一個字型檔案就能實現這些多樣的效果。

幾個常見的超級字型家族例子:Source(Sans,Serif,Code),IBM Plex(Sans,Sans Condensed,Serif,Mono), andRoboto(Sans (Flex),Sans (Classic),Sans Condensed (Classic),Serif,Slab,Mono).

System font 系統字型

系統字型就是預裝在裝置上的字型,不需要額外下載就能直接使用。

以前的網頁設計師只能用電腦自帶的字型,也就是說他們的選擇很有限,只能用那些在Windows、Mac和Linux系統上都能找到的字型。

現在我們還是會用系統自帶的字型,特別是在大家需要在不同裝置上編輯的文件裡。如果是做網頁,用font-family: system-ui這個設定就能自動使用每個系統最合適的字型:Windows電腦會用Segoe,蘋果裝置會用San Francisco,安卓手機會用Roboto。

Grade 字型級別

字型級別是一種特殊的設計方法,主要用來確保字型在不同地方看起來都一樣清晰。比如在報紙和雜誌上,因為紙張不一樣(報紙比較粗糙,雜誌紙比較光滑),同樣的字型可能會看起來不一樣粗細。字型級別就是用來解決這個問題的。

字型級別和字重不一樣。字重會改變字的寬度,但字型級別只改變字的粗細程度,字的寬度保持不變。這樣做的目的是讓字型在各種情況下都能保持設計師想要的樣子。

我們在日常使用中也能看到這種情況。比如在電腦或手機螢幕上,淺色的字放在深色背景上會看起來比較粗,而在紙上印刷出來可能會有相反的效果。透過調整字型級別,我們可以讓字型在任何地方看起來都差不多。

現在的可變字型技術讓我們能更精確地控制字型級別,這樣就能讓文字看起來更舒服,更容易閱讀。

Roboto Serif

Icon & symbol 圖示和符號

圖示和符號看起來很像,但其實不一樣。圖示就像是畫出來的小圖片,讓你一眼就能看懂是什麼東西。比如,一個手指的圖示能直接告訴你要點選或滑動。而符號則更像是一個簡單的標記,需要大家約定好它的含義。比如,齒輪符號我們都知道是表示設定。

有些圖示隨著時間變得越來越簡單。比如"儲存"功能現在還在用軟盤的圖示,雖然很多人可能都沒見過真正的軟盤。還有三條橫線的符號,現在大家都知道點它就能開啟選單。

在Google Fonts裡,你能找到這兩種型別的圖示供你使用。

Logo, logomark, logotype Logo、圖形標誌與文字標誌

標誌(Logo)就是一個品牌獨特的標識,通常包含圖案和文字。它讓人一眼就能認出這個品牌。

來看幾個例子:

  1. 完整標誌:用特製的Anybody字型做成的圖案和文字組合
  1. 單獨的圖案標誌:最適合放在社交媒體頭像上
  1. 純文字標誌:在不需要圖案的地方使用,文字都是特別設計過的

圖形標誌(Logomark)就是品牌的圖案部分。比如大家都認識的耐克的勾、星巴克的美人魚,還有蘋果的蘋果圖案。

文字標誌(Logotype)是經過設計的品牌名稱。可能只是調整了字間距,也可能把字母完全重新設計過。

這兩個部分加在一起就是完整的標誌。不過我們平常說"Logo"的時候,也可能指其中任何一個部分。